<template>
  <div class="tab-icon" style="margin-top: 10px">
    <div
      style="
        display: flex;
        align-items: center;
        margin-top: 39px;
        margin-left: 20px;
      "
    >
      <el-radio v-model="punchType" label="1" @change="onChangePunchType">
        <span class="radio-class">{{ $t("common.countBuy") }}</span>
      </el-radio>
      <div class="base-num-group">
        <img
          src="../../assets/images/ico_minus.png"
          style="width: 22px; margin-left: 40px; cursor: pointer"
          @click="onMinus"
          @dragstart="imgdragstart"
        />
        <input
          placeholder="1"
          :disabled="inputDisabled"
          v-model="basePunchNums"
          oninput="if(value.length>4) value=value.slice(0,4)"
          type="number"
          @input="checkInputContent"
          @blur="checkInputNum"
          style="
            width: 105px;
            margin: 0 15px;
            height: 40px;
            border-radius: 3px;
            border: 1px solid #cccccc;
            padding-left: 15px;
          "
        />
        <img
          src="../../assets/images/ico_add.png"
          style="width: 22px; cursor: pointer"
          @click="onAddNums"
          @dragstart="imgdragstart"
        />

        <span
          style="cursor: pointer"
          @mouseover="display()"
          @mouseout="disappear()"
          ref="showResTipsBtn"
          class="tab-icon-mid-text-two"
          >?</span
        >

        <div
          v-show="showQaTips"
          ref="showResTips"
          @mouseover="display()"
          @mouseout="disappear()"
          class="introduction-word"
        >
          {{ $t("resource.countTips") }}
        </div>
      </div>
    </div>

    <div class="res-punched" v-if="hasPunched">
      {{ $t("common.resourceDescription") }}
    </div>

    <div
      style="width: 100%; height: 1px; background: #cccccc; margin-top: 42px"
    ></div>

    <div class="res-price-group" v-if="belong !== 3 && belong !== 1">
      <div style="display: flex; width: 95%; margin: 0 auto">
        <div style="width: 80px">说明:</div>
        <div>
          {{ $t("resource.priceTips") }}
        </div>
      </div>

      <div style="display: flex; align-items: center; margin-top: 15px">
        <span class="radio-class" style="margin-left: 20px">{{
          $t("resource.priceShow")
        }}</span>
        <span class="tab-icon-top-price"
          >{{ $t("resource.price") }}{{ finalTotoalPrice }}</span
        >
      </div>
      <div>
        <button
          v-if="this.priceInfo !== 0"
          class="add-shop-cart1"
          style="font-size: 14px"
          @click="addCart"
        >
          立即购买
        </button>
        <button
          v-if="this.priceInfo !== 0"
          @click="onAddShopCart"
          class="add-shop-cart"
        >
          {{ $t("resource.buy") }}
        </button>
      </div>
      <el-dialog title="订单" :visible.sync="dialogVisible" width="30%">
        <span style="font-size: 20px"
          >你好，您的订单已经生成，是否立即支付订单。</span
        >
        <br />
        <br />
        <div style="font-size: 20px">
          支付金额：<span style="color: red">￥{{ finalTotoalPrice }}</span>
        </div>
        <br />
        <div style="font-size: 20px">
          账户余额：<span style="color: red">￥{{ userMoney }}</span>
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" :disabled="blo" @click="giveMoney"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
    <ResourceList class="ResourceList" ref="ResourceList"></ResourceList>
    <classifies class="ResourceList" ref="classifies"></classifies>
    <resList class="ResourceList" ref="resList"></resList>
  </div>
</template>

<script>
import Axios from "axios";
import ajax from "../../common/ajax";
import encryption from "../../common/encryption";
import ResourceList from "../../pages/resources/ResourceList.vue";
import classifies from "../../components/res-list/Classify.vue";
import resList from "../../components/res-list/ResList.vue";
import api from "../../common/api";
export default {
  name: "BasePunch",
  components: { ResourceList, classifies, resList },
  data() {
    return {
      blo: false,
      dialogVisible: false,
      // 购买类型 1=按数量购买，2=按时间购买
      punchType: "1",
      // 基本规格购买数量
      basePunchNums: 1,
      // 购买年限价格选项
      rangePrice: [],
      userMoney: 0,
      userMoneyList: [],
      // 购物时长
      year: "",
      // 总价格
      totalPrice: 0,
      // 购买数量是否可用
      inputDisabled: false,
      // 下拉框是否可用
      selectDisabled: true,
      // 时间购买的价格系数
      punchUnitPrice: 1.8,
      showQaTips: false,
      showQaTips1: false,
      account1: "",
      resourceList: {},
    };
  },
  props: {
    belong: {
      default: 0,
    },
    // 价格
    price: {
      default: 0,
      type: Number,
    },
    // 是否购买，true=购买，false=未购买
    hasPunched: {
      default: false,
      type: Boolean,
    },
    // 价格信息
    priceInfo: Number,
    // 是否可以加入到购物车
    canAddCart: {
      default: true,
      type: Boolean,
    },
    parentMethod: Function,
  },
  computed: {
    // 计算总价格
    finalTotoalPrice() {
      return (
        this.totalPrice * (this.basePunchNums === "" ? 1 : this.basePunchNums)
      );
    },
  },
  mounted() {
    getMoney(this);
    initPriceInfo(this);
  },
  methods: {
    giveMoney() {
      let that = this;
      let json = {
        orderNo: this.orderNo,
        userId: this.$route.query.userId,
      };
      ajax.post({
        url: api.resourceDetail.routeName + api.resourceDetail.children.pay,
        data: json,
        success: function () {
          that.dialogVisible = false;
          that.$message({
            message: "支付成功",
            type: "success",
          });
          history.go(-1);
          if (that.$route.query.isPurchase == 1) {
            that.$refs.classifies.belong = undefined;
            that.$refs.classifies.page = 1;
            that.$refs.resList.page = 1;
            that.$refs.resList.loading = false;
            that.$refs.classifies.goBack();
          } else {
            that.$refs.ResourceList.resourceType =
              that.$route.query.resourceType;
            that.$refs.ResourceList.belong = that.$route.query.belong;
            that.$refs.ResourceList.goback();
          }
        },
        fail(res) {
          if (res.ErrCode == 300011) {
            that.blo = true;
            setTimeout(() => {
              that.blo = false;
            }, 3000);
            that.$message({
              message: that.$t("resourceOrder.noAmount"),
              type: "warning",
            });
          } else if (res.ErrCode == 300001) {
            that.$message({
              message: that.$t("resourceOrder.noData"),
              type: "warning",
            });
          } else {
            that.$message({
              message: that.$t("resourceOrder.noService"),
              type: "warning",
            });
          }
        },
      });
    },
    addCart() {
      this.dialogVisible = true;
      getOrderNo(this);
      getMoney(this);
    },
    imgdragstart(e) {
      e.preventDefault();
    },

    checkInputContent() {
      if (parseInt(this.basePunchNums) === 0) {
        this.basePunchNums = 1;
      }
    },
    // 判断输入的内容
    checkInputNum() {
      if (this.basePunchNums < 1) {
        this.basePunchNums = 1;
      }
    },

    // 修改购买类型
    onChangePunchType(e) {
      this.totalPrice = this.priceInfo;
      if (parseInt(e) === 1) {
        this.inputDisabled = false;
        this.selectDisabled = true;
        this.year = "";
      } else if (parseInt(e) === 2) {
        this.inputDisabled = true;
        this.selectDisabled = false;
        this.basePunchNums = 1;
      }
    },

    // 修改了购买时长，计算价格
    onChangePunchRange(e) {
      this.punchUnitPrice = parseFloat(e);
      this.totalPrice = (
        Math.round(this.priceInfo * this.punchUnitPrice * 100) / 100
      ).toFixed(2);
    },
    onAddShopCart() {
      let data = {
        num: this.basePunchNums,
      };
      this.parentMethod(data);
    },

    // 减少数量
    onMinus() {
      if (
        this.basePunchNums === 1 ||
        parseInt(this.punchType) !== 1 ||
        this.basePunchNums === ""
      ) {
        return;
      }
      this.basePunchNums--;
    },

    // 增加购买数量
    onAddNums() {
      if (parseInt(this.punchType) !== 1) {
        return;
      }
      this.basePunchNums++;
    },

    display() {
      let btn = this.$refs.showResTipsBtn;
      let tips = this.$refs.showResTips;
      let top = btn.offsetTop;
      let left = btn.offsetLeft;

      tips.style.top = top + 30 + "px";
      tips.style.left = left - 205 + "px";

      this.showQaTips = true;
    },

    disappear() {
      this.showQaTips = false;
    },
    display1() {
      let btn = this.$refs.showResTipsBtn1;
      let tips = this.$refs.showResTips1;
      let top = btn.offsetTop;
      let left = btn.offsetLeft;

      tips.style.top = top + 30 + "px";
      tips.style.left = left - 205 + "px";

      this.showQaTips1 = true;
    },

    disappear1() {
      this.showQaTips1 = false;
    },
  },
};
//获取订单编号
function getOrderNo(that) {
  ajax.post({
    url: api.customDetail.routeName + api.customDetail.children.save,
    data: {
      resourceNo: that.$route.query.resourceNo,
      num: that.basePunchNums,
      userId: that.$route.query.userId,
    },
    success(res) {
      that.resourceList = JSON.parse(encryption.decryptionMxr(res));
      that.orderNo = that.resourceList.orderNo;
    },
  });
}
/**
 * 获取账户余额
 *
 * @param that VUE对象
 */
function getMoney(that) {
  ajax.get({
    url:
      api.Info.routeName + api.Info.children.account + that.$route.query.userId,
    success(res) {
      that.userMoney = JSON.parse(encryption.decryptionMxr(res)).userMoney;
    },
  });
}
/**
 * 初始化价格信息
 *
 * @param that VUE对象
 */
function initPriceInfo(that) {
  that.totalPrice = that.priceInfo;
  that.punchUnitPrice = that.priceInfo.oneYearPrice;
  that.rangePrice.push({
    label: `一年`,
  });
}
</script>

<style scoped>
.tab-icon {
  border: 1px solid #cccccc;
  border-radius: 4px;
  display: block;
}

.radio-class {
  font-size: 18px;
  color: #333333;
  font-weight: bold;
}

.base-num-group {
  display: flex;
  align-items: center;
  margin-left: 35px;
}

.res-punched {
  margin-left: 15px;
  margin-top: 25px;
  font-size: 20px;
}

.res-price-group {
  width: 100%;
  justify-content: space-between;
  margin-top: 45px;
  margin-bottom: 45px;
}

.tab-icon-top-price {
  font-size: 36px;
  color: #007cff;
  margin-left: 5px;
  font-weight: bold;
}
.add-shop-cart1 {
  width: 164px;
  height: 55px;
  border: 0;
  background-image: linear-gradient(-90deg, #14b136 0%, #14b136 100%);
  border-radius: 7.43px;
  line-height: 55px;
  text-align: center;
  color: #ffffff;
  margin: 15px auto 0;
  cursor: pointer;
}
.add-shop-cart {
  width: 164px;
  height: 55px;
  border: 0;
  background-image: linear-gradient(-90deg, #f5a623 0%, #fd9d00 100%);
  border-radius: 7.43px;
  line-height: 55px;
  text-align: center;
  color: #ffffff;
  margin: 15px auto 0;
  cursor: pointer;
}

.enable-add-shop-cart {
  background: #cccccc;
}

.tab-icon-mid-text-two {
  font-size: 23.78px;
  color: #007cff;
  border: 1px solid #007cff;
  margin-left: 20px;
  border-radius: 24px;
  width: 24.8px;
  height: 24.8px;
  line-height: 24px;
  text-align: center;
}

.introduction-word {
  background: #ffffff;
  border: 1px solid #979797;
  border-radius: 4px;
  font-size: 16px;
  color: #999999;
  padding: 5px;
  text-align: left;
  line-height: 30px;
  position: absolute;
  z-index: 101;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
.ResourceList {
  display: none;
}
</style>
